WatchKit アプリをデザインしよう！

1. コンセプトは「パーソナル」「全体」「軽量」

パーソナル

全体

軽量

2. モデルは3種類、画面サイズは2種類

画面サイズ

モデル

3. 新しいインタラクション

Force Touch

Digital Crown

Taptic Engine

4. WatchKit アプリは iOS アプリとセットで使う

5. WatchKit アプリでできる3つのこと

WatchKit App

Glance

Actionable Notification

6. 利用できるナビゲーションの方法は2種類

階層的なナビゲーション

ページングのナビゲーション

2つのナビゲーションを組み合わせることはできない

Modal Sheet によるモーダル表示

7. UI パーツは10種類、すべて UIKit とは別物

8. UI のカスタマイズ

色使い

タイポグラフィ

アニメーション

ブランディング

9. レイアウトの制約

一般的なガイドライン

画面サイズ

10. アイコンとメニュー画像

アイコンと画像サイズ

メニューアイコンの画像

まとめ

参考

iOS アプリデザイナー必読！WatchKit アプリをデザインする前に知っておきたい10のポイント

iOS 8 特集解説記事 200本公開中!!

#Apple Watch

#ハードウェア

#iOS

#WatchKit

諏訪悠紀

2015.04.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

WatchKit アプリをデザインしよう！

Apple Watch の発売日も4月27日に決まり、注目を集めているのが Apple Watch 上で動作するアプリ「WatchKit アプリ」です。しかしながら、WatchKit アプリで一体どのようなことができるのか、まだ追いきれていない人が多いのではないでしょうか。

結論から言うと、WatchKit アプリでできることは限られています。利用可能な View も iPhone アプリに比べてかなり限定されていますし、現状では iPhone アプリと連動させて動作させる必要があり、自由度があまりありません。

しかし、 WatchKit はかなりの可能性を秘めています。その理由は Apple Watch という今までにない新たなデバイスの上で動作するアプリであるということです。スマートウォッチと呼ばれる「腕に付けるデバイス」は、今までに無かったような新しいユーザー体験をもたらしてくれるはずです。そもそも、Apple が着用型デバイスを販売するのも、Apple Watch が初めてです。

果たして、Apple Watch は人々にとって有用なモノとなるのか？その答えは Apple Watch 上で動作するアプリが握っていると言えるでしょう。WatchKit で提供される機能を理解し、それらを活用し、そして人々にとって有用に成り得るアプリを開発することが私たちに求められています。

ということで、本記事では WatchKit アプリのデザインについて焦点を当て、 WatchKit アプリをどのようにデザインしていけば良いか、公開されているドキュメントを参考にしつつ、個人的な解釈を交えながら解説したいと思います。

なお、Apple は「Apple Watch Human Interface Guidelines」に Apple Watch の目的や搭載するアプリのデザインの基本などをまとめています。こちらはまだ英語ドキュメントしかありませんが、併せてお読みいただくことでより理解が深まるはずです。

コンセプトは「パーソナル」「全体」「軽量」
モデルは3種類、画面サイズは2種類
新しいインタラクション
WatchKit アプリは iOS アプリとセットで使う
WatchKit アプリでできる3つのこと
利用できるナビゲーションの方法は2種類
UI パーツは10種類、すべて UIKit とは別物
レイアウトの制約
UI のカスタマイズ
アイコンとメニュー画像

1. コンセプトは「パーソナル」「全体」「軽量」

Apple Watch は「パーソナル」「全体」「軽量」の3つのテーマを体現しています。Watch Kit 対応アプリは、このコンセプトに則ったデザインであることが求められます。

パーソナル

Apple Watch の UI は着用者(ユーザー)の存在と同調するように考えられています。これは、加速度センサーや心拍計などを通して知ることが出来る「着用者のパーソナライズされた情報」を活用して、着用者にとって有用な情報や新たなコミュニケーションを生み出すように設計されている、ということです。

WatchKit アプリをデザインするときには、利用するユーザーが Apple Watch を着用しているということを意識してデザインする必要があります。

全体

Apple Watch は、物理的なモノとソフトウェアの間の境界をあいまいにするように設計されています。Apple Watch には、「デジタルクラウン」と呼ばれるソフトウェアを細かく制御できるハードウェアや、「タピックエンジン」と呼ばれる Apple Watch を絶妙に振動させる装置が付いています。Retina ディスプレイにおいても、画面とハードウェアの境界があまり見えないように設計されています。

つまり、Apple Watch はユーザーに対して「ソフトウェアを操作している」「ハードウェアを操作している」という感覚を与えないように配慮されているということです。その上で動作するアプリも同様に、それがソフトウェアであるということを意識させず、ソフトウェアかハードウェアかあまり区別できないような感じでデザインされていることが求められます。

軽量

Apple Watch は、手首上の位置と画面サイズを最大限に活用する、軽量で迅速なインタラクションが行えるように設計されています。Apple Watch で表示される情報は、プライバシーと使いやすさを両立するために、素早くアクセスでき、また容易に消すことができるようになっています。

つまり、Apple Watch の着用者が「情報を簡単に・素早く見たり消したりする」という経験を持つことになります。Watch Kit 対応アプリはこの経験を尊重し、簡単に、素早く扱うことが出来るようにデザインされていることが求められます。

2. モデルは3種類、画面サイズは2種類

Apple Watch はモデルが3種類、画面サイズが2種類存在します。WatchKit アプリをデザインする上では、画面サイズが2種類あるということが一番重要です。

画面サイズ

Apple Watch は 38mm と 42mm の2種類のサイズで発売されます。後述するレイアウトの制約事項から察すると、今後増えていく可能性は非常に高いです。

38mm (272 x 340 px)
42mm (312 x 390 px)

モデル

いわゆる普通のモデルと、スポーツ用、高級仕様の計3つのラインアップです。形状や素材などといった容姿や付け心地の違いがあり、機能に違いはありません。ですので、「Apple Watch SPORT だけ◯◯◯が使える」といったような優劣はありません。

3. 新しいインタラクション

Apple Watch は、今までにあったようでなかった新しいインタラクションを備えています。なお、マルチタッチには対応していません。

Force Touch

Force Touch はタッチされた圧力を検知する機能です。iPhone ではタッチは強かろうが弱かろうが同一のものと見なされていましたが、Apple Watch ではタッチの強さによって異なる挙動をします。例えば、メッセージアプリでは強くタッチすることで操作メニューが表示されます。ある操作の流れの中で、特定のオプションを必要になったときに瞬時に呼び出すことができます。なお、Force Touch は先日発表された新しい MacBook と MacBook Pro 13 インチのトラックパッドにも搭載されています(今後、搭載機種は増えていくものと思われます)。

Digital Crown

Digital Crown は横に付いているぜんまい(竜頭)です。ズームやスクロールをすばやく正確に行え、押下するとホーム画面に戻ることができます。ズーム・スクロール・ホームに戻るといった機能を、いつでもどこでも操作できるように、ハードウェアのパーツとして組み込んでいます。

Taptic Engine

Taptic Engine はリニアアクチュエータという振動機です。アラートや通知を受け取ったときに手首を叩くかのように振動します(おそらく、心地の良い感覚で振動するように設計されているはず)。なお、Taptic Engine は Force Touch と同様に、新しい MacBook と MacBook Pro 13 インチのトラックパッドにも搭載されています。

4. WatchKit アプリは iOS アプリとセットで使う

WatchKit アプリは iOS アプリの機能拡張です。これは Today を始めとした App Extension とほぼ同様の存在であることを指します。つまり、iOS アプリとセットで使います。

WatchKit アプリをデザインするときは、iOS アプリとの関連性を考える必要があります。例えば iOS アプリのある操作を行うと WatchKit アプリに通知されるとか、逆に WatchKit アプリのあるアクションによって iOS アプリに変化が起きるなどという相互作用が発生します。ですので、iOS アプリのコンセプトを踏まえた上で、操作感やビジュアルを考えていったほうが全体の統一感が出るかも知れません。もし iOS アプリと WatchKit アプリのデザインが分業されているのであれば、密なコミュニケーションが必要かも知れません。

なおプレスリリースによると2015年の終わりから Apple Watch 用のネイティブアプリの開発が可能になるとのことです(待ち遠しいですね！)。Apple Watch のネイティブアプリが登場すると、ガイドラインへの変更や追加が予想されます。

5. WatchKit アプリでできる3つのこと

WatchKit アプリでは、大きく分けて3つのことができます。

WatchKit App

Apple Watch 上で動作する、いわゆるアプリです。後述する UI パーツを組み合わせて構成します。iPhone とペアである必要があり、WatchKit アプリで発生したアクションによって iOS アプリの処理を実行したりできます。

Glance

Glance はアプリの重要な情報を即座に表示する機能です。通知タイムリーで即時的な読み取り専用の通知を表示することができます。例えば、スケジュールのリマインダーや野球の試合の結果、速報ニュースなどのような情報をユーザーに効果的に伝えることができます。この機能はオプションなので、すべての WatchKit アプリが搭載している必要はありません。

Actionable Notification

iOS アプリで利用する機会の多い、ローカル通知およびリモート通知を Apple Watch に表示する機能です。今まで通知は iPhone や iPad に送られていましたが、Apple Watch を装着している場合 iOS がユーザーの状況を判断し、ユーザーにとって適切なほうに通知が表示されるようになります。Apple Watch で通知を受け取った場合、通知をタップして WatchKit アプリを起動したり、ボタンをタップしてアクションを実行することができます。

Actionable Notification は、デフォルトの通知のスタイルを利用することもできますし、通知のデザインをカスタマイズして、グラフィックやコンテンツを表示することもできます。デフォルトの通知のスタイルを使うのであれば、システムが自動的にスタイルを適用して表示するので、アプリで特別な実装は必要ありません。

6. 利用できるナビゲーションの方法は2種類

WatchKit アプリでは、通常の iOS アプリと同様に UI パーツを配置して、ユーザーとインタラクションしたりコンテンツを表示したりできます。デザインする上で特に重要なのは2つのナビゲーションの方法が利用できるという点です。いずれの方法も iOS アプリではお馴染みの方法です。

階層的なナビゲーション

「リスト画面を選択したら詳細画面が積み重なる」といったような階層的なナビゲーションを構築することができます。iOS アプリでもよく見かける方式です。しかし iOS アプリと比べると画面サイズがかなり小さいこともあり1画面につき1つの操作を受け付け、その結果として画面を遷移させるように構築することが求められます。

ページングのナビゲーション

左右にスワイプしてページを切り替える方式のナビゲーションを構築することができます。下部にドットのインジケータが表示されるので、表示中の画面が何ページ目なのかすぐ分かるようになっています。この方式は、シンプルなデータやコンテンツを単純に表示するのに適しています。こちらも iOS アプリと同様、ページ数が多すぎるとナビゲーションが複雑になってしまうので、出来る限り少ないページ数になるように抑えましょう。

2つのナビゲーションを組み合わせることはできない

注意点になりますが、1つの WatchKit アプリ上では上記の2つのナビゲーションを組み合わせて使用することができません。アプリの遷移が複雑になってしまうので当然ですよね。デザインの初期の段階で、どちらのナビゲーション方式のほうがアプリの目的に合っているかよく考えて選定しましょう。

上記2つのナビゲーションの他に Modal Sheet と呼ばれる表示方法が利用できます。これは読んで字の如くモーダル表示を提供するもので、現在の画面遷移に割り込む形で表示することができます。Modal Sheet は、それまでに行っていたタスクとは別なタスクをユーザーに提供します。例えば、メインのタスクをサポートするための予備情報や、気晴らしになるような情報などを提供するときに利用すると良いとされています。

しかし、Modal Sheet の登場回数が多すぎるとユーザーを困惑させてしまうので、出来る限り最小限に抑えるようにしたほうが良いです。一般的に、Modal Sheet は次のような場合に使用することを検討しましょう。

ユーザーに注意を促したいとき
自己完結型のタスクを提供したいとき (メインタスクに影響しないタスク)

7. UI パーツは10種類、すべて UIKit とは別物

WatchKit アプリで利用できる UI パーツは以下の10種類です。iOS アプリでは UIKit というフレームワークを使っていましたが、それとは完全に別物です。つまり iOS アプリの UI でできることは異なるということです。iOS アプリでは簡単に実現できたのに、WatchKit アプリでは実現するのは難しい、といったことも考えられます。特に Map はかなり異なるので、どのようなことができるかチェックしておいたほうが良いと思います。

Labels : 静的なテキストを表示するUI。インタラクションは受け付けない。
Images : 画像を表示するUI。コマ送りアニメーションも表示できる。
Groups : コンテナの役割を持つUI。縦方向または横方向に UI アイテムを配置できる。
Tables : アイテム数に応じて同じレイアウトのコンテンツを繰り返し表示できる UI。
Buttons : ボタン。幅はスクリーンいっぱいに表示される。
Switches : オン・オフを切り替えるための UI。ラベルは常に含まれる。
Sliders : ある大きさ(強さ)を調整するための UI。増減ボタンにカスタム画像を使用できる。
Maps : マップを表示する UI。静的なスナップショットを表示できる。
Dates and Timers : 日付や時間を表示する UI。フォーマットはカスタマイズ可能。
Menus : Force Touch (強タップ)で表示されるコンテキストメニュー。スクロールや階層化は不可能。

8. UI のカスタマイズ

WatchKit アプリの UI をカスタマイズする上で、いくつかの制約があります。必要な情報を絞ったり、パッと見たときに瞬時に情報が確認できるように見やすくしたりといった工夫が必要です。

色使い

色使いは、アプリのブランディングはもちろん、視覚的な連続性を提供するのに役立ちます。次のような制約・注意点があるので、これらに留意してデザインする必要があります。

背景は必ず黒を使用すること

Apple Watch のハード(ベゼル)がブラックになっているため、背景に明るい色を使用すると画面のエッジが目立ってしまいます。そのため、背景色は黒を使用しましょう。

アプリのブランディングやステータスのためにキーカラーを使用すること

すべてのアプリはキーカラーを定義しています。Apple Watch の OS は、画面の左上にアプリ名や重要な情報を表示するためにキーカラーを使用します。そのため、アプリのブランディングの一環としてキーカラーを使用しましょう。

テキストにはハイコントラストになる色を使用すること

テキストを読みやすくするため、ハイコントラストにする必要があります。そのままテキストだけを表示する場合、背景が黒になっていると思われるので、白などの明るい色を使用しましょう。

インタラクション性を示すためだけに別な色を使用することは避けてください

テキストとは違う、ボタンやその他のコントロールであることを表現するためだけに別な色を使うことは避けましょう。これは恐らく、見た目のシンプルさの維持と複雑な操作感を避けるためだと思われます。

色盲の人の見え方に注意してください

ほとんどの色盲の人は、緑と赤を識別することが困難です。そのため、例えば2つの状態(有効・無効など)を区別するための唯一の方法として緑と赤を使用しないでください。一部の画像ソフトでは色盲の人の見え方をテストするためのツールが付属しているので、デザインするときにテストすることをお勧めします。

他の国や文化で異なった解釈をされる色ではないか調査してください

あなたのアプリで使用した色が、他の国や文化で異なった意味合いで解釈されないか、正しいメッセージとして伝わるか、可能な限り確認するようにしましょう。

タイポグラフィ

何よりも、テキストは読みやすくなければいけません。そのタイポグラフィがどんなに美しくても、ユーザーがテキストを読むことができなければ、意味はありません。

Apple Watch のシステムフォントは、Apple Watch 上での読みやすさのために特別に設計されました。大きいサイズでは少しでも多くの文字が表示できるよう水平方向のスペースがタイトになっており、逆に小さいサイズでは一目で認識できるとともに読みやすくするためにスペースが緩やかになっています。句読点はフォントサイズが小さくなるにつれて大きくなります。そして Apple Watch は、明確さ・読みやすさを維持するために、テキストサイズの変更にしたがってフォントを動的に切り替えます。

常に Dynamic Type を使用してください

テキストは常に Dynamic Type を使用するため、次のような特徴があります。

どのフォントサイズでも、文字間隔と行の高さは自動調整
ボディ、脚注、ヘッドラインなどといった、テキストのスタイルを指定する機能を提供
テキストサイズはユーザー設定に合わせて変わります(アクセシビリティ含む)

組み込みのテキストスタイルを使用する場合、上記の Dynamic Type の機能はそのまま使用することができます。カスタムフォントを使用する場合、Dynamic Type を適用するためにいくつかの作業が必要になります(ユーザーの設定を検知し、テキストを変更する処理の実装)。

可能な限り、組み込みのテキストスタイルを使用してください

組み込みのテキストスタイルは Dynamic Type をサポートしており、また Apple Watch に似合うように設計されています。特別な理由がない限りは組み込みのテキストスタイルを使用したほうが、デザイン的にもコスト的にもベターと言えるでしょう。

アプリ全体で単一のフォントを使用してください

アプリ内に多くの異なったフォントを混在させると、アプリが断片化してしまい、ずさんなものに見えてしまう可能性が高まります。特別な理由がない場合は単一のフォントを使用しましょう。

システムフォントのサイズを指定するときは、ポイントサイズに基いてフォントを指定してください

19ポイント以下のテキストには「San Francisco Text」フォントを使用し、20ポイント以上のテキストには「San Francisco Display」フォントを使用してください。

アニメーション

美しく繊細なアニメーションは Apple Watch に浸透し、ユーザー体験をより魅力的かつダイナミックにします。次のような効果があると適切です。

ステータスの伝達とフィードバックの提供
行動の結果の視覚化

静止画像のシーケンスを使用した、レンダリング済みのアニメーションを作成してください

動的にアニメーションを生成すると、アニメーションの再生を開始する前に遅延が発生してしまいます。アニメーションをユーザーに迅速に提供できるように、Watch Kit アプリのバンドルにレンダリング済みのアニメーションのフレームすべてを静止画像として含めるようにしてください。また、高フレームレートでスムーズなアニメーションを提供するようにしましょう。

アニメーションの再生の制御が必要な場合は、画像またはグループのオブジェクトを使用してください

ほとんどの UI オブジェクトは、アニメーションを無限ループで再生します。アニメーションの開始、または終了を表現したい場合、画像またはグループを使ってプログラムで提供する方法しかありません。

Watch Kit アプリのアニメーションについてのノウハウは、以前開催した「iOS オールスターズ勉強会」にて堤さんが発表された内容にまとめられています。こちらをぜひ参考にしてください。

WatchKitを実際にさわってみてわかったこと

ブランディング

アプリをブランディングするには、アイコンや色使い、カスタムボタン、テキストなど、様々な方法があります。アプリのグラフィック要素をデザインするとき、各カスタム要素は見た目がよくそれ自体で十分に機能すべきだが、それらの要素がアプリ内ではカスタムまたは標準のどちらかに関わらず、他の要素に属しているかのように見えるはずであるということを忘れないで下さい。

洗練された控えめな方法で、ブランドのアセットを組み込んでください

人々はアプリを、何らかの目的を成し遂げるため、または楽しむために使用します。そして、広告を見ることを望んでいません。最高のユーザーエクスペリエンスのために、ユーザーにブランドのアイデンティティを粛々と思い出させるような、フォント、色使い、画像などを選択するようにしましょう。

アプリまたは Glance で、ブランドやアプリのロゴを表示しないようにしてください

Apple Watch の画面上のスペースは限られていて、とても貴重です。ロゴの表示はスペースを取るため、ユーザーが本来見たいコンテンツを追いやってしまう可能性があります。

アプリ上にロゴを表示することは、Web ページにロゴを表示する場合と同じような目的は果たしません。ユーザーは、見たい Web ページの所有者を知らなくてもその Web ページに辿り着くことが出来るため、自分がいま見ている Web ページの所有者を伝えるために、ロゴを表示しておく必要があります。しかしアプリの場合、ユーザーは通常、アプリを開く前にアプリのアイコンを目にしているのが一般的です。そのため、アプリ上にアプリのアイコンやロゴを置くことは、ユーザーにとって不必要な情報である可能性が高いです。

9. レイアウトの制約

アプリは Apple Watch のすべてのサイズで同じ UI を表示されるようにレイアウトします。相対的なレイアウトにより、利用可能なスペースを必要に応じて伸縮されるようにします。

一般的なガイドライン

横に並べるコントロールの数は3つまでにしてください

ボタンを横に並べて表示する場合、ボタンにはテキストを使用せず、アイコンを使用するようにしましょう。また、並べる数は3つまでに留めておくようにしましょう。それ以上の数を並べてしまうと、1つあたりのサイズが小さくなるため、タップする目標としては小さすぎます。

パディングを使わずに、横幅いっぱいを使用してください

Apple Watch のハードウェアとディスプレイの間にはベゼルがあるため、視覚的なパディングが付与されることになります。そのため、アプリ上でパディングを含める必要はありません。パディングを含んでしまうと、Apple Watch 上で見たときに隙間が開いているように見えてしまいます。

左揃えでレイアウトしてください

UI 要素は、上から下に、左から右にレイアウトするようにしましょう。左側から配置することは、そのコンテンツが拡張して表示する余地があること保証します。

テキストのボタンは横幅いっぱいで作成してください

テキストラベルを表示するボタンは、ラベルが常に全て見えるように、横幅いっぱいを使うようにしましょう。

セカンダリのアクションを提示する、コンテキストメニューを使用してください

あまり頻繁に使われることを想定していないアクションについては、無理に画面上にボタンを配置せず、コンテキストメニューを採用するようにしてください。コンテキストメニューは画面上を Force Touch すると表示されるメニューです。

画面サイズ

画面サイズが異なる場合でも、同じコンテンツを提供してください

UI が画面サイズに応じて自然に伸縮することを想定して、画面をレイアウトするようにしましょう。実装上は、相対的サイズとスペースのオプションを使用することで実現可能です。

画面サイズ毎に使用される画像を提供してください

もし画面サイズ毎で参照する場合によく見える(荒くならない)場合は同じ画像を使用して良いですが、そうでない場合は各画面サイズ毎に使われる画像アセットを提供するようにしましょう。相対的なレイアウトの場合、UI が伸縮することが多いと思いますが、そのような場合は各画面サイズ毎の画像アセットを用意する必要があります。

10. アイコンとメニュー画像

アイコンと画像サイズ

すべてのアプリには、ユーザーから見て一意に識別でき、かつ美しく記憶に残るようなアイコンが求められます。ホーム画面上ではアプリがアイコンのみで識別されるため、アプリの目的を伝えつつ、iOS アプリと繋がりがあるように表現しなければいけません。

アイコンのサイズ

まず WatchKit アプリのアイコンサイズは、次のような種類の画像ファイルが必要です。なお、これらの画像は @2x として扱います。

画像アセットの種類	Apple Watch (38mm)	Apple Watch (42mm)
Notification Center icon	48 px	55 px
Long-Look notification icon	80 px	88 px
Home Screen icon	80 px	80 px
Short-Look icon	172 px	196 px

さらに、WachKit を含む iOS アプリには、次の種類のアイコンが必要になります。こちらも忘れずに作成しましょう。

画像アセットの種類	@2x	@3x
App icon	58 px	87 px

また、次のような注意点があります。

正方形で作成すること(自動で円形にマスクされるため自前での加工は不要)
PNG フォーマットで作成すること
24 ビット深度で作成すること(アルファチャンネルを含めない)

ホーム画面のアイコン

Apple Watch のホーム画面はユニークですが、お馴染みのものです。その中に表示されているアイコンは iOS アプリのアイコンと似ていますが、付随するテキストがないところが異なります。そのため、小さい画面の中でこのアイコンが明らかにそのアプリのものだと特定できるようにする必要があります。WatchKit アプリの機能が iOS アプリ側と非常によく似ている場合、アイコンはほぼそのままで問題ないでしょう。しかし、WatchKit アプリが iOS アプリの補完またはコントローラとして動作する場合は、アイコンのデザインはその役割によって異なってきます。

ホーム画面のアイコンをデザインするときは、次のようなポイントを意識するようにしましょう。